<!--
 * @页面名称: 门禁
 * @描述:
 * @作者: 辛慰
 * @Date: 2019-06-03 16:26:11
 -->
<template>
  <div class="wrap">
    <topHeader />
    <div class="contanier">
      <div class="content">
        <div class="select-option">
          <el-select @change="selectGet" v-model="form.region" placeholder="门禁机">
            <el-option
              v-for="item in selectList"
              :key="item.id"
              :label="item.name"
              :value="item.id"
            ></el-option>
          </el-select>
        </div>
        <div class="tab-page">
          <el-tabs type="border-card" v-model="activeName" @tab-click="handleClick" v-if="isShowAdd" style="min-height:5.8rem">
            <el-tab-pane v-for="(item,index) in roomList" :key="index" :label="item.name" :name="item.name">
              <div class="con-item">
                <div class="time-line">
                  <div class="time-query">
                    <el-date-picker
                      v-model="timeArr"
                      type="daterange"
                      align="right"
                      style="width: 4rem"
                      unlink-panels
                      value-format="yyyy-MM-dd"
                      range-separator="至"
                      start-placeholder="开始日期"
                      end-placeholder="结束日期"
                      @change="selectTIime"
                      :picker-options="pickerOptions">
                    </el-date-picker>
                  </div>
                  <vuescroll :ops="ops">
                    <div class="timeline-box" v-if="snapImages.length > 0">
                      <div class="timeline-item" v-for="(item, index) in snapImages" :key="index">
                        <img class="camera-img" src="../assets/image/camera.jpg" alt="">
                        <div class="line" :style="{visibility:index == (snapImages.length - 1) ? 'hidden': 'visible'}"></div>
                        <p class="date-text">{{ item.createtime | moment('YYYY-MM-DD') }}</p>
                        <img class="snap-small-img" :src="baseUrl+item.imageurl" @click="scaleImage(item.imageurl)">
                      </div>
                    </div>
                    <div class="timeline-box timeline-list" v-else>
                      <div>暂无数据</div>
                    </div>
                  </vuescroll>
                </div>
                <el-table :data="snapImages" border style="width: 100%;margin-top:80px;">
                  <el-table-column  prop="eventtype" label="抓拍类型" align="center">门禁</el-table-column>
                  <el-table-column  prop="imageurl"  label="抓拍图片" align="center">
                    <template slot-scope="scope">
                      <el-button @click.native.prevent="checkSubmember(scope.row,scope.$index)" size="medium" type="primary">查看</el-button>
                      <div v-if="dialogTableVisible" class="modalBox">
                        <div class="modal">
                          <img :src="currImage" class="modalImg">
                          <img src="../assets/image/quxiao.png" class="modalIcon" @click="checkDisappear">
                        </div>
                      </div>
                    </template>
                  </el-table-column>
                  <el-table-column prop="createtime" label="抓拍时间" align="center">
                    <template slot-scope="scope">
                      <div>{{ scope.row.createtime | moment('YYYY-MM-DD') }}</div>
                    </template>
                  </el-table-column>
                </el-table>
                <el-pagination
                  :small="true"
                  @current-change="pageCurrentChange"
                  :current-page="pageIndex"
                  :page-size="10"
                  layout="total, prev, pager, next, jumper"
                  :total="total">
                </el-pagination>
              </div>
            </el-tab-pane>
          </el-tabs>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import vuescroll from 'vuescroll'
import topHeader from '@/components/public/topHeader'
import apiUrl from '@/api'
export default {
  data () {
    return {
      activeName: '',
      selectList: [], // 门禁组数据
      form: {
        region: ''
      },
      isShowAdd: false, // tab按钮默认不显示
      roomList: [], // 门禁组下的门禁机数据
      currImage: '', // 弹框显示图片
      dialogTableVisible: false, // 查看图片弹框默认隐藏
      currentPage: 1, // 当前页
      pagesize: 10, // 一页的数量
      snapImages: [], // 门禁机记录数据
      filterData: '', // 过滤后的门禁组数据
      timeArr: [this.$dtime(new Date()).format('YYYY-MM-DD'), this.$dtime(new Date()).format('YYYY-MM-DD')], // 查询时间
      pickerOptions: {
        shortcuts: [{
          text: '最近一周',
          onClick (picker) {
            const end = new Date()
            const start = new Date()
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 7)
            picker.$emit('pick', [start, end])
          }
        }, {
          text: '最近一个月',
          onClick (picker) {
            const end = new Date()
            const start = new Date()
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 30)
            picker.$emit('pick', [start, end])
          }
        }, {
          text: '最近三个月',
          onClick (picker) {
            const end = new Date()
            const start = new Date()
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 90)
            picker.$emit('pick', [start, end])
          }
        }]
      },
      ops: {// 滚动条参数配置
        bar: {
          showDelay: 500,
          onlyShowBarOnScroll: true,
          keepShow: true,
          background: '#DEDEDE',
          opacity: 1,
          hoverStyle: false,
          specifyBorderRadius: false,
          minSize: false,
          size: '6px',
          disable: false
        },
        scrollPanel: {
          scrollingX: true,
          scrollingY: false
        }
      },
      baseUrl: apiUrl.baseUrl,
      pageIndex: 1,
      pageSize: 10,
      total: 10 // 分页总数据
    }
  },
  components: {
    topHeader,
    vuescroll
  },
  created () {
    this.getTableData()
  },
  mounted () {

  },
  methods: {
    // 点击门禁机切换不同的门禁机记录数据
    handleClick (tab, event) {
      this.snapImages = []
      console.log(tab.label)
      this.filterData = this.selectList[0].childcategories.filter(item => {
        return item.name === tab.label
      })
      console.log(this.filterData)
      this.selectTIime()
    },
    // 获取门禁机组数据
    getTableData () {
      this.$http.get('/api/Screen/GetDeviceCategory').then((res) => {
        console.log(res)
        this.selectList = res.data.data.parentcategories.filter(item => {
          return item.name === '门禁机'
        })
        console.log(this.selectList)
      })
    },
    // 选择门禁机组获取不同的门禁库房
    selectGet () {
      this.roomList = this.selectList[0].childcategories
      this.isShowAdd = true
    },
    selectTIime () {
      this.snapImages = []
      console.log(this.timeArr)
      if (this.timeArr && this.timeArr.length > 0) {
        // 获取设备列表
        this.$http.get('/api/Screen/GetDeviceList', {
          params: {
            categoryId: this.filterData[0].id
          }
        }).then((res) => {
          console.log(res)
          res.data.data.forEach(item => {
            this.$http.get('/api/Screen/GetDeviceRecord', {
              params: {
                deviceId: item.id,
                pageIndex: this.pageIndex,
                pageSize: this.pageSize,
                startDate: this.timeArr[0],
                endDate: this.timeArr[1]
              }
            }).then((res) => {
              console.log(res)
              this.snapImages = res.data.data.securitydevicerecords
              this.total = res.data.data.totalcount
              console.log(this.snapImages)
            })
          })
        })
      }
    },
    // 点击表格查看按钮
    checkSubmember (val, index) {
      console.log(val, index)
      this.currImage = this.baseUrl + val.imageurl
      this.dialogTableVisible = true
    },
    // 关闭弹框按钮
    checkDisappear () {
      this.dialogTableVisible = false
    },
    // 点击图片全屏显示图片
    scaleImage (url) {
      this.currImage = this.baseUrl + url
      this.dialogTableVisible = true
    },
    // 切换分页
    pageCurrentChange (val) {
      this.pageIndex = val
      this.selectTIime()
    }
  }
}
</script>

<style scoped>
.contanier {
  height: calc( 100% - .8rem );
  background: #f3f3f3;
}
.content {
  width: 100%;
  height: 100%;
  padding: .2rem;
  box-sizing: border-box;
}
.select-option {
  float: left;
}
.tab-page {
  background: #fff;
  margin-top: .6rem;
  color: #333;
  min-height: 5.8rem;
  box-shadow: 0 2px 4px 0 rgba(0,0,0,.12), 0 0 6px 0 rgba(0,0,0,.04);
}
.time-line {
  width: 100%;
  height: 2.2rem;
  /* overflow: hidden; */
}
.time-query {
  display: flex;
  justify-content: flex-start;
}
.vuescroll-box {
  overflow-x: hidden;
  border: 1px solid #333;
  box-sizing: border-box;
}
.snapImage {
  width: .4rem;
  height: .3rem;
  display: block;
}
.modal{
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background: rgba(0,0,0,0.3);
  z-index: 1000;
}
.modalImg{
  width: 6.8rem;
  height: 4.2rem;
  z-index: 1001;
  position: relative;
  top: 1.34rem;
}
.modalIcon{
  width: .5rem;
  height: .5rem;
  position: relative;
  top: 2.2rem;
  left: -3.63rem;
  cursor: pointer;
}
.el-table thead {
  background: #f3f4f8;
}
.pagin {
  display: flex;
  justify-content: space-between;
}
.timeline-box {
  margin-top: .2rem;
  height: 1.8rem;
  padding-left: .6rem;
  display: flex;
  justify-content: start;
  align-items: center;
  border: 1px solid #eee;
  box-sizing: border-box;
  cursor: pointer;
}
.timeline-list {
  justify-content: center;
}
.timeline-list > div {
  color: #909399;
}
.timeline-item {
  height: 100%;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  position: relative;
}
.camera-img {
  width: .24rem;
  height: .24rem;
  display: inline-block;
}
.line {
  width: 1.4rem;
  display: inline-block;
  border-top: 2px solid #333;
}
.date-text {
  font-size: .12rem;
  position: absolute;
  top: 65%;
  left: -.4rem;
}
.snap-small-img {
  width: .6rem;
  height: .6rem;
  display: block;
  position: absolute;
  top: 6%;
  left: -.2rem;
  box-shadow: 0px 0px .1rem rgba(0,0,0,0.1);
  -webkit-transition: all ease .3s;
  transition: all ease .5s;
}
.snap-small-img:hover {
  -webkit-transform: scale(1.05);
  transform: scale(2.05);
  box-shadow: 0px 0px .1rem rgba(0,0,0,0.1);
  border-radius: 50%;
}
</style>
